<template>
  <div class="settings-view">
    <div class="settings-header">
      <div class="view-title">
        <h1 class="title">
          <span class="title-icon">⚙️</span>
          游戏设置
        </h1>
        <p class="subtitle">配置游戏选项和偏好设置</p>
      </div>
      
      <div class="settings-actions">
        <button @click="resetToDefaults" class="reset-btn">
          <span class="btn-icon">🔄</span>
          重置默认
        </button>
        <button @click="saveSettings" class="save-btn">
          <span class="btn-icon">💾</span>
          保存设置
        </button>
      </div>
    </div>
    
    <div class="settings-content">
      <div class="settings-sidebar">
        <nav class="settings-nav">
          <button 
            v-for="tab in settingsTabs" 
            :key="tab.id"
            @click="activeTab = tab.id"
            class="nav-item"
            :class="{ active: activeTab === tab.id }"
          >
            <span class="nav-icon">{{ tab.icon }}</span>
            <span class="nav-label">{{ tab.label }}</span>
          </button>
        </nav>
      </div>
      
      <div class="settings-main">
        <!-- 游戏设置 -->
        <div v-if="activeTab === 'game'" class="settings-section">
          <div class="section-header">
            <h2 class="section-title">游戏设置</h2>
            <p class="section-description">配置游戏核心功能和行为</p>
          </div>
          
          <div class="settings-groups">
            <div class="settings-group">
              <h3 class="group-title">游戏速度</h3>
              <div class="setting-item">
                <label class="setting-label">默认游戏速度</label>
                <select v-model="settings.game.defaultSpeed" class="setting-select">
                  <option value="0.5">0.5x</option>
                  <option value="1">1x</option>
                  <option value="2">2x</option>
                  <option value="4">4x</option>
                  <option value="8">8x</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">最大游戏速度</label>
                <select v-model="settings.game.maxSpeed" class="setting-select">
                  <option value="4">4x</option>
                  <option value="8">8x</option>
                  <option value="16">16x</option>
                  <option value="32">32x</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.game.pauseOnEvents"
                    class="setting-checkbox"
                  >
                  事件发生时自动暂停
                </label>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">自动保存</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.game.autoSave"
                    class="setting-checkbox"
                  >
                  启用自动保存
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">自动保存间隔</label>
                <select v-model="settings.game.autoSaveInterval" class="setting-select" :disabled="!settings.game.autoSave">
                  <option value="5">5分钟</option>
                  <option value="10">10分钟</option>
                  <option value="15">15分钟</option>
                  <option value="30">30分钟</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">保存文件数量</label>
                <input 
                  type="number" 
                  v-model="settings.game.maxSaveFiles"
                  min="1" 
                  max="20"
                  class="setting-input"
                  :disabled="!settings.game.autoSave"
                >
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">游戏难度</h3>
              <div class="setting-item">
                <label class="setting-label">AI难度</label>
                <select v-model="settings.game.aiDifficulty" class="setting-select">
                  <option value="easy">简单</option>
                  <option value="normal">普通</option>
                  <option value="hard">困难</option>
                  <option value="expert">专家</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.game.ironmanMode"
                    class="setting-checkbox"
                  >
                  铁人模式（无法读档）
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.game.randomEvents"
                    class="setting-checkbox"
                  >
                  启用随机事件
                </label>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 显示设置 -->
        <div v-if="activeTab === 'display'" class="settings-section">
          <div class="section-header">
            <h2 class="section-title">显示设置</h2>
            <p class="section-description">配置界面外观和显示选项</p>
          </div>
          
          <div class="settings-groups">
            <div class="settings-group">
              <h3 class="group-title">主题</h3>
              <div class="setting-item">
                <label class="setting-label">界面主题</label>
                <div class="theme-selector">
                  <button 
                    v-for="theme in themes" 
                    :key="theme.id"
                    @click="settings.display.theme = theme.id"
                    class="theme-option"
                    :class="{ active: settings.display.theme === theme.id }"
                  >
                    <div class="theme-preview" :style="{ background: theme.preview }"></div>
                    <span class="theme-name">{{ theme.name }}</span>
                  </button>
                </div>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">界面缩放</h3>
              <div class="setting-item">
                <label class="setting-label">UI缩放比例</label>
                <div class="scale-selector">
                  <input 
                    type="range" 
                    v-model="settings.display.uiScale"
                    min="0.8" 
                    max="1.5" 
                    step="0.1"
                    class="scale-slider"
                  >
                  <span class="scale-value">{{ Math.round(settings.display.uiScale * 100) }}%</span>
                </div>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">字体大小</label>
                <select v-model="settings.display.fontSize" class="setting-select">
                  <option value="small">小</option>
                  <option value="medium">中</option>
                  <option value="large">大</option>
                  <option value="extra-large">特大</option>
                </select>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">动画效果</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.display.animations"
                    class="setting-checkbox"
                  >
                  启用界面动画
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">动画速度</label>
                <select v-model="settings.display.animationSpeed" class="setting-select" :disabled="!settings.display.animations">
                  <option value="slow">慢</option>
                  <option value="normal">正常</option>
                  <option value="fast">快</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.display.particleEffects"
                    class="setting-checkbox"
                  >
                  启用粒子效果
                </label>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">显示选项</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.display.showTooltips"
                    class="setting-checkbox"
                  >
                  显示工具提示
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.display.showFPS"
                    class="setting-checkbox"
                  >
                  显示FPS计数器
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.display.fullscreen"
                    class="setting-checkbox"
                  >
                  全屏模式
                </label>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 音频设置 -->
        <div v-if="activeTab === 'audio'" class="settings-section">
          <div class="section-header">
            <h2 class="section-title">音频设置</h2>
            <p class="section-description">配置音效和音乐选项</p>
          </div>
          
          <div class="settings-groups">
            <div class="settings-group">
              <h3 class="group-title">音量控制</h3>
              <div class="setting-item">
                <label class="setting-label">主音量</label>
                <div class="volume-control">
                  <input 
                    type="range" 
                    v-model="settings.audio.masterVolume"
                    min="0" 
                    max="100" 
                    class="volume-slider"
                  >
                  <span class="volume-value">{{ settings.audio.masterVolume }}%</span>
                </div>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">音乐音量</label>
                <div class="volume-control">
                  <input 
                    type="range" 
                    v-model="settings.audio.musicVolume"
                    min="0" 
                    max="100" 
                    class="volume-slider"
                  >
                  <span class="volume-value">{{ settings.audio.musicVolume }}%</span>
                </div>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">音效音量</label>
                <div class="volume-control">
                  <input 
                    type="range" 
                    v-model="settings.audio.sfxVolume"
                    min="0" 
                    max="100" 
                    class="volume-slider"
                  >
                  <span class="volume-value">{{ settings.audio.sfxVolume }}%</span>
                </div>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">UI音效音量</label>
                <div class="volume-control">
                  <input 
                    type="range" 
                    v-model="settings.audio.uiVolume"
                    min="0" 
                    max="100" 
                    class="volume-slider"
                  >
                  <span class="volume-value">{{ settings.audio.uiVolume }}%</span>
                </div>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">音频选项</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.audio.muteWhenInactive"
                    class="setting-checkbox"
                  >
                  窗口失焦时静音
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.audio.enableSpatialAudio"
                    class="setting-checkbox"
                  >
                  启用空间音效
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">音频质量</label>
                <select v-model="settings.audio.quality" class="setting-select">
                  <option value="low">低</option>
                  <option value="medium">中</option>
                  <option value="high">高</option>
                  <option value="ultra">超高</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 通知设置 -->
        <div v-if="activeTab === 'notifications'" class="settings-section">
          <div class="section-header">
            <h2 class="section-title">通知设置</h2>
            <p class="section-description">配置游戏通知和提醒</p>
          </div>
          
          <div class="settings-groups">
            <div class="settings-group">
              <h3 class="group-title">通知类型</h3>
              <div 
                v-for="notification in notificationTypes" 
                :key="notification.id"
                class="setting-item"
              >
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.notifications[notification.id]"
                    class="setting-checkbox"
                  >
                  {{ notification.label }}
                </label>
                <p class="setting-description">{{ notification.description }}</p>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">通知选项</h3>
              <div class="setting-item">
                <label class="setting-label">通知持续时间</label>
                <select v-model="settings.notifications.duration" class="setting-select">
                  <option value="3">3秒</option>
                  <option value="5">5秒</option>
                  <option value="10">10秒</option>
                  <option value="0">手动关闭</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">通知位置</label>
                <select v-model="settings.notifications.position" class="setting-select">
                  <option value="top-right">右上角</option>
                  <option value="top-left">左上角</option>
                  <option value="bottom-right">右下角</option>
                  <option value="bottom-left">左下角</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.notifications.playSound"
                    class="setting-checkbox"
                  >
                  播放通知音效
                </label>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 控制设置 -->
        <div v-if="activeTab === 'controls'" class="settings-section">
          <div class="section-header">
            <h2 class="section-title">控制设置</h2>
            <p class="section-description">配置键盘快捷键和控制选项</p>
          </div>
          
          <div class="settings-groups">
            <div class="settings-group">
              <h3 class="group-title">键盘快捷键</h3>
              <div class="keybinds-list">
                <div 
                  v-for="keybind in keybinds" 
                  :key="keybind.id"
                  class="keybind-item"
                >
                  <div class="keybind-info">
                    <span class="keybind-name">{{ keybind.name }}</span>
                    <span class="keybind-description">{{ keybind.description }}</span>
                  </div>
                  <div class="keybind-key">
                    <button 
                      @click="editKeybind(keybind)"
                      class="key-button"
                      :class="{ editing: editingKeybind === keybind.id }"
                    >
                      {{ editingKeybind === keybind.id ? '按下新键...' : keybind.key }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">鼠标控制</h3>
              <div class="setting-item">
                <label class="setting-label">鼠标灵敏度</label>
                <div class="sensitivity-control">
                  <input 
                    type="range" 
                    v-model="settings.controls.mouseSensitivity"
                    min="0.1" 
                    max="3.0" 
                    step="0.1"
                    class="sensitivity-slider"
                  >
                  <span class="sensitivity-value">{{ settings.controls.mouseSensitivity.toFixed(1) }}x</span>
                </div>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.controls.invertMouseY"
                    class="setting-checkbox"
                  >
                  反转鼠标Y轴
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.controls.edgeScrolling"
                    class="setting-checkbox"
                  >
                  启用边缘滚动
                </label>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 高级设置 -->
        <div v-if="activeTab === 'advanced'" class="settings-section">
          <div class="section-header">
            <h2 class="section-title">高级设置</h2>
            <p class="section-description">高级用户选项和调试功能</p>
          </div>
          
          <div class="settings-groups">
            <div class="settings-group">
              <h3 class="group-title">性能选项</h3>
              <div class="setting-item">
                <label class="setting-label">渲染质量</label>
                <select v-model="settings.advanced.renderQuality" class="setting-select">
                  <option value="low">低</option>
                  <option value="medium">中</option>
                  <option value="high">高</option>
                  <option value="ultra">超高</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">最大FPS</label>
                <select v-model="settings.advanced.maxFPS" class="setting-select">
                  <option value="30">30 FPS</option>
                  <option value="60">60 FPS</option>
                  <option value="120">120 FPS</option>
                  <option value="0">无限制</option>
                </select>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.advanced.vsync"
                    class="setting-checkbox"
                  >
                  启用垂直同步
                </label>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">调试选项</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.advanced.debugMode"
                    class="setting-checkbox"
                  >
                  启用调试模式
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    type="checkbox" 
                    v-model="settings.advanced.showPerformanceStats"
                    class="setting-checkbox"
                  >
                  显示性能统计
                </label>
              </div>
              
              <div class="setting-item">
                <label class="setting-label">日志级别</label>
                <select v-model="settings.advanced.logLevel" class="setting-select">
                  <option value="error">错误</option>
                  <option value="warn">警告</option>
                  <option value="info">信息</option>
                  <option value="debug">调试</option>
                </select>
              </div>
            </div>
            
            <div class="settings-group">
              <h3 class="group-title">数据管理</h3>
              <div class="setting-item">
                <button @click="exportSettings" class="action-btn">
                  <span class="btn-icon">📤</span>
                  导出设置
                </button>
                <button @click="importSettings" class="action-btn">
                  <span class="btn-icon">📥</span>
                  导入设置
                </button>
              </div>
              
              <div class="setting-item">
                <button @click="clearCache" class="action-btn danger">
                  <span class="btn-icon">🗑️</span>
                  清除缓存
                </button>
                <button @click="resetAllData" class="action-btn danger">
                  <span class="btn-icon">⚠️</span>
                  重置所有数据
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 设置标签页
const settingsTabs = [
  { id: 'game', label: '游戏', icon: '🎮' },
  { id: 'display', label: '显示', icon: '🖥️' },
  { id: 'audio', label: '音频', icon: '🔊' },
  { id: 'notifications', label: '通知', icon: '🔔' },
  { id: 'controls', label: '控制', icon: '⌨️' },
  { id: 'advanced', label: '高级', icon: '⚙️' }
]

// 主题选项
const themes = [
  { id: 'dark', name: '深色', preview: 'linear-gradient(45deg, #1a1a1a, #2d2d2d)' },
  { id: 'light', name: '浅色', preview: 'linear-gradient(45deg, #ffffff, #f5f5f5)' },
  { id: 'blue', name: '蓝色', preview: 'linear-gradient(45deg, #1e3a8a, #3b82f6)' },
  { id: 'green', name: '绿色', preview: 'linear-gradient(45deg, #166534, #22c55e)' }
]

// 通知类型
const notificationTypes = [
  { id: 'research', label: '研究完成', description: '科技研究完成时显示通知' },
  { id: 'construction', label: '建筑完成', description: '建筑建造完成时显示通知' },
  { id: 'ships', label: '舰船建造', description: '舰船建造完成时显示通知' },
  { id: 'events', label: '随机事件', description: '随机事件发生时显示通知' },
  { id: 'combat', label: '战斗结果', description: '战斗结束时显示通知' },
  { id: 'trade', label: '贸易完成', description: '贸易交易完成时显示通知' }
]

// 键盘快捷键
const keybinds = ref([
  { id: 'pause', name: '暂停/继续', description: '暂停或继续游戏', key: 'Space' },
  { id: 'speed_up', name: '加速', description: '增加游戏速度', key: '+' },
  { id: 'speed_down', name: '减速', description: '降低游戏速度', key: '-' },
  { id: 'overview', name: '总览', description: '打开帝国总览', key: 'F1' },
  { id: 'research', name: '研究', description: '打开研究界面', key: 'F2' },
  { id: 'military', name: '军事', description: '打开军事界面', key: 'F3' },
  { id: 'trade', name: '贸易', description: '打开贸易界面', key: 'F4' },
  { id: 'save', name: '保存', description: '快速保存游戏', key: 'Ctrl+S' }
])

// 响应式数据
const activeTab = ref('game')
const editingKeybind = ref<string | null>(null)

// 设置数据
const settings = reactive({
  game: {
    defaultSpeed: 1,
    maxSpeed: 8,
    pauseOnEvents: true,
    autoSave: true,
    autoSaveInterval: 10,
    maxSaveFiles: 5,
    aiDifficulty: 'normal',
    ironmanMode: false,
    randomEvents: true
  },
  display: {
    theme: 'dark',
    uiScale: 1.0,
    fontSize: 'medium',
    animations: true,
    animationSpeed: 'normal',
    particleEffects: true,
    showTooltips: true,
    showFPS: false,
    fullscreen: false
  },
  audio: {
    masterVolume: 80,
    musicVolume: 70,
    sfxVolume: 85,
    uiVolume: 60,
    muteWhenInactive: true,
    enableSpatialAudio: false,
    quality: 'high'
  },
  notifications: {
    research: true,
    construction: true,
    ships: true,
    events: true,
    combat: true,
    trade: false,
    duration: 5,
    position: 'top-right',
    playSound: true
  },
  controls: {
    mouseSensitivity: 1.0,
    invertMouseY: false,
    edgeScrolling: true
  },
  advanced: {
    renderQuality: 'high',
    maxFPS: 60,
    vsync: true,
    debugMode: false,
    showPerformanceStats: false,
    logLevel: 'warn'
  }
})

// 方法
function saveSettings() {
  console.log('保存设置:', settings)
  // 这里应该调用实际的保存逻辑
}

function resetToDefaults() {
  if (confirm('确定要重置所有设置到默认值吗？')) {
    console.log('重置设置到默认值')
    // 这里应该重置所有设置
  }
}

function editKeybind(keybind: any) {
  editingKeybind.value = keybind.id
  // 这里应该监听键盘输入来设置新的快捷键
  setTimeout(() => {
    editingKeybind.value = null
  }, 3000)
}

function exportSettings() {
  const settingsData = JSON.stringify(settings, null, 2)
  const blob = new Blob([settingsData], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'star-conquest-settings.json'
  a.click()
  URL.revokeObjectURL(url)
}

function importSettings() {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.json'
  input.onchange = (e) => {
    const file = (e.target as HTMLInputElement).files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        try {
          const importedSettings = JSON.parse(e.target?.result as string)
          Object.assign(settings, importedSettings)
          console.log('设置导入成功')
        } catch (error) {
          console.error('设置导入失败:', error)
        }
      }
      reader.readAsText(file)
    }
  }
  input.click()
}

function clearCache() {
  if (confirm('确定要清除所有缓存数据吗？')) {
    console.log('清除缓存')
    // 这里应该清除缓存
  }
}

function resetAllData() {
  if (confirm('警告：这将删除所有游戏数据和设置！确定要继续吗？')) {
    console.log('重置所有数据')
    // 这里应该重置所有数据
  }
}
</script>

<style scoped>
.settings-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.view-title {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.title-icon {
  font-size: 1.5rem;
}

.subtitle {
  margin: 0.25rem 0 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.settings-actions {
  display: flex;
  gap: 1rem;
}

.reset-btn,
.save-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-btn {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.reset-btn:hover {
  background: var(--bg-hover);
}

.save-btn {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.save-btn:hover {
  background: var(--primary-hover);
}

.settings-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.settings-sidebar {
  width: 250px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  padding: 1rem 0;
}

.settings-nav {
  display: flex;
  flex-direction: column;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--primary-color);
  color: white;
  border-right: 3px solid var(--primary-hover);
}

.nav-icon {
  font-size: 1.2rem;
}

.nav-label {
  font-weight: 500;
}

.settings-main {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.settings-section {
  max-width: 800px;
}

.section-header {
  margin-bottom: 2rem;
}

.section-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.section-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.settings-groups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-group {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.group-title {
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.setting-description {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-left: 1.5rem;
}

.setting-select,
.setting-input {
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  max-width: 200px;
}

.setting-select:disabled,
.setting-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.setting-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
}

.theme-selector {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-option:hover {
  border-color: var(--primary-color);
}

.theme-option.active {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

.theme-preview {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.theme-name {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.scale-selector,
.volume-control,
.sensitivity-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 300px;
}

.scale-slider,
.volume-slider,
.sensitivity-slider {
  flex: 1;
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  outline: none;
  accent-color: var(--primary-color);
}

.scale-value,
.volume-value,
.sensitivity-value {
  min-width: 50px;
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
}

.keybinds-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.keybind-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
}

.keybind-info {
  flex: 1;
}

.keybind-name {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.keybind-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.keybind-key {
  min-width: 120px;
  text-align: right;
}

.key-button {
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.key-button:hover {
  background: var(--bg-hover);
}

.key-button.editing {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

.action-btn:hover {
  background: var(--bg-hover);
}

.action-btn.danger {
  background: var(--error-color);
  color: white;
  border-color: var(--error-color);
}

.action-btn.danger:hover {
  background: var(--error-hover);
}

.btn-icon {
  font-size: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings-content {
    flex-direction: column;
  }
  
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  
  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 1rem;
  }
  
  .nav-item {
    white-space: nowrap;
    min-width: auto;
  }
  
  .settings-main {
    padding: 1rem;
  }
  
  .theme-selector {
    justify-content: center;
  }
  
  .keybind-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .keybind-key {
    text-align: left;
  }
}
</style>